<template>
    <div class="goodsinfo">
        <!-- 轮播部分 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbolist="thuminfo" :isfullpage="false"></swiper>
                </div>
            </div>
        </div>
        <!-- 价格部分 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        <span>市场价：</span><span class="old">￥{{goodsinfo.market_price}}</span>&nbsp;&nbsp;&nbsp;
                        <span>特惠价：</span><span class="new">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <p>
                        购买数量：
                        <numbox @getValue="getSelectValue" :maxValue="goodsinfo.stock_quantity"></numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 参数部分 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                    <p>上架时间：{{goodsinfo.add_time | datemsg('YYYY-MM-DD')}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(goodsinfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(goodsinfo.id)">商品评论</mt-button>
            </div>
        </div>
        <!-- 动画部分 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <span class="smallball" v-if="ballflag" ref="ball"></span>
        </transition>
    </div>
</template>

<script>
// 引用组件
import swiper from '../subcomponents/swiper.vue';
import numbox from '../subcomponents/goodslist_numbox.vue'

export default {
    data() {
        return {
            id: this.$route.params.id,
            thuminfo: [],
            goodsinfo: [],
            ballflag: false,
            selectvalue: 1
        }
    },
    methods: {
        // 获取轮播
        getthuminfo(e){
            this.$http.get('api/getthumimages/' + e).then(res => {
                this.thuminfo = res.body.message;
            })
        },
        // 获取信息
        getgoodsinfo(e){
            this.$http.get('api/goods/getinfo/' + e).then(res => {
                this.goodsinfo = res.body.message[0];
            })
        },

        // 编程式导航
        goDesc(e){
            this.$router.push({name: 'goodsdesc', params: {e}})
        },
        goComment(e){
            this.$router.push({name: 'goodscomment', params: {e}})
        },

        // 动画部分
        beforeEnter(el){
            el.style.transform = "translate(0,0)"
        },
        enter(el,done){
            // 通过 $refs 获取当前元素，domObject.getBoundingClientRect() 获取当前元素的位置
            const sonTop = this.$refs.ball.getBoundingClientRect().top;
            const sonLeft = this.$refs.ball.getBoundingClientRect().left;
            const parentTop = document.querySelector('.mui-badge').getBoundingClientRect().top;
            const parentLeft = document.querySelector('.mui-badge').getBoundingClientRect().left;

            el.offsetWidth;
            // el.style.transform = "translate(30vw,400px)";
            el.style.transform = `translate(${parentLeft - sonLeft}px,${parentTop - sonTop}px)`;
            el.style.transition = "all 0.5s cubic-bezier(.63,.08,.76,.21)";
            done()
        },
        afterEnter(el){
            this.ballflag = false
        },

        // 加入购物车
        addShopCar(){
            this.ballflag = !this.ballflag;
            var msg = {
                id: this.id,
                count: this.selectvalue,
                price: this.goodsinfo.sell_price,
                flag: true
            }
            this.$store.commit('addToCar',msg)
        },

        // 通过父组件向子组件传递方法，获取子组件参数 => 商品数量
        getSelectValue(number){
            this.selectvalue = number;
        }
    },
    created() {
        this.getthuminfo(this.id);
        this.getgoodsinfo(this.id);
    },
    components: {
        swiper: swiper,
        numbox: numbox
    }
}
</script>

<style lang="less">
    .goodsinfo{
        overflow: auto;
        background: #f9f9f9;
        .mint-swipe-indicator{
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
        .price{
            p{
                color: rgb(97, 97, 97)
            }
            .old{
                color: #8f8f94;
                text-decoration: line-through;
            }
            .new{
                color: red;
            }
        }
        .mui-card-footer{
            display: block;
            button{
                &:first-child{
                    margin-bottom: 10px;
                }
            }
        }
        .smallball{
            display: inline-block;
            width: 15px;
            height: 15px;
            background: rgb(240, 42, 42);
            border-radius: 50%;
            position: absolute;
            left: 150px;
            top: 395px;
        }
    }
</style>